<template>
<div>
    <ul>
        <li v-for="item in list">
        <p>姓名：{{ item.name }}</p>
        <p>年龄：{{ item.age }}</p>
        </li>
    </ul>
    <table border="1">
        <tr style="background-color: pink;">
                 <td>用户借款编号</td>
                <td>借款用户账号</td>
                <td>借款款项名称</td>
                <td>借款金额</td>
                <td>剩余还款本金</td>
        </tr>
        <tr v-for="item in blist">
            <td>{{item.id}}</td>
                <td>{{item.borrowName}}</td>
                <td>{{item.userName}}</td>
                <td>{{item.money}}</td>
                <td>{{item.U_money}}</td>
        </tr>
    </table>
    <input type="text" v-model="s" />
    <p>{{ s }}</p>
</div>
</template>


<script setup lang="ts">
import {ref,reactive,toRefs} from 'vue'
const s=ref("双向数据绑定演示")
let data=reactive({
    list:[
        {name:'张大',age:21},
        {name:'赵武',age:20},
        {name:'张柳',age:24},
        {name:'六三',age:26},
        {name:'思安',age:29},
    ],
    blist:[
    {id:1,userName:'张三',borrowName:'八维助学金',money:3000,U_money:1000},
        {id:2,userName:'李四',borrowName:'八维助学金',money:2000,U_money:0},
        {id:3,userName:'王五',borrowName:'八维助学金',money:5000,U_money:1000},
    ]
})
let {list,blist} =toRefs(data)

</script>


<style>
ul{
    list-style: none;
}
li{
    margin-bottom: 20px;
}
</style>
